<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gdmt="">
    <div th:replace="common/common::html"></div>
    <title th:text="#{menu.info.tip}"></title>

    <a href="#" class="btn" onclick="modifyMenuInfo()">
        <i class="glyphicon glyphicon-modal-window"></i>
        <span th:text="#{common.modify}"></span>
    </a>
    <a href="#" class="btn" onclick="addMenuInfo()">
        <i class="fa fa-plus"></i>
        <span th:text="#{common.add}"> </span>
    </a>
    <a href="#" class="btn" onclick="deleteMenuInfo();">
        <i class="fa fa-trash-o"></i>
        <span th:text="#{common.delete}"> </span>
    </a>
    <a href="#" class="btn" onclick="boundMenuInfo();">
        <i class="fa fa-chain-broken"></i>
        <span th:text="#{common.bound}"></span>
    </a>
    <a href="#" class="btn" onclick="unboundMenuInfo();">
        <i class="fa fa-unlock"></i>
        <span th:text="#{common.unbound}"></span>
    </a>




        <script th:inline="javascript" >
            function editTable(trId) {
                $("#" + trId).addClass("table-edit-tr");
            }

//国际化-保存

            function saveTable(trId) {
                var trDom = $("#" + trId);
                var form = $("<form></form>");
                form.appendTo($("body"));
                trDom.find(".edit").cloneObj().appendTo(form);
                form.ajaxForm({
                    dataType: "json",
                    success : function(data) {
                        //message(data.msg);
                        form.remove();
                        $("#table-i18n-edit-id").tableEditReload();
                    },
                    error : function() {
                        message(/*[[#{common.error}]]*/'');
                    },
                    complete : function(response, status) {

                    }
                });

                var menuIdDom = form.find(".edit[name='menuId']");
                if(menuIdDom.val() === ''){
                    menuIdDom.val($("#mod-menu-id").val());
                    form.attr({
                        method:"post",
                        action:/*[[@{/menu/addI18nData}]]*/""
                    });
                }else{
                    form.attr({
                        method:"post",
                        action:/*[[@{/menu/saveI18nData}]]*/""
                    });
                }
                form.submit();
            }

//国际化-删除
            function deleteTable(trId) {
                var trDom = $("#" + trId);
                var form = $("<form></form>");
                form.appendTo($("body"));
                trDom.find(".edit").cloneObj().appendTo(form);
                form.ajaxForm({
                    dataType: "json",
                    success : function(data) {
                        form.remove();
                        $("#table-i18n-edit-id").tableEditReload();
                    },
                    error : function() {
                        message(/*[[#{common.error}]]*/'');
                    },
                    complete : function(response, status) {

                    }
                });
                form.attr({
                    method:"post",
                    action:/*[[@{/menu/deleteI18nData}]]*/""
                });
                form.submit();
            }





            var _gridWidth;
            var _gridHeight;
            //页面自适应
            function resizePageSize(){
                _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
                _gridHeight = $(document).height()-32-85; /* -32 顶部主菜单高度，   -90 查询条件高度*/
            }

            function boundMenuInfo() {
            var modMenuId = $("#mod-menu-id").val();
            if(modMenuId == null || '' === modMenuId){
                return;
            }
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/menu/getMenuTreeByMenuId }]]*/'',
                    data: [{name:"menuId",value:modMenuId}],
                    success: function (data) {
                        $.fn.zTree.init($("#bound-menu-ztree-id"), BoundMenuSetting, data);
                        var ztreeObj = $.fn.zTree.getZTreeObj("bound-menu-ztree-id");
                        var nodes = ztreeObj.getNodesByParam("id",modMenuId,null);
                        ztreeObj.removeNode(nodes[0]);
                        $("#bound-menu-dialog-id").dialog('open');

                    },
                    error: function(msg){
                        message(/*#{common.error}*/'');
                    }
                }
            );
                var BoundMenuSetting = {
                    check: {
                        enable: true,
                        chkStyle: "radio",
                        radioType: "all"
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };

            }


            function unboundMenuInfo() {
                var modMenuId = $("#mod-menu-id").val();
                if(modMenuId == null || '' === modMenuId){
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/menu/unBoundByMenuId}]]*/'',
                    data: [{name:"menuId",value:modMenuId}],
                    success: function (data) {
                        leftMenuLoad();
                        message(data.msg);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            }





            function unboundMenuInfo() {
                var modMenuId = $("#mod-menu-id").val();
                if(modMenuId == null || '' === modMenuId){
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/menu/unBoundByMenuId}]]*/'',
                    data: [{name:"menuId",value:modMenuId}],
                    success: function (data) {
                        leftMenuLoad();
                        message(data.msg);
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            }


        var leftMenuSetting = {
                check: {
                    enable: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback : {
                    onClick : onClickNode
                }
            };
            function leftMenuLoad() {
                $.ajax({
                        type: 'post',
                        async: false,
                        dataType : 'json',
                        url: /*[[@{/menu/getMenuTree}]]*/'',
                        data: [],
                        success: function (data) {
                            $.fn.zTree.init($("#menu-left-tree-ul-id"), leftMenuSetting, data);
                        },
                        error: function(msg){
                            message(/*[[#{common.error}]]*/'');
                        }
                    }
                );
            }




            $(function() {
                resizePageSize();
                _gridWidth =  _gridWidth - 153;
                var _columnWidth = _gridWidth/3;
                $("#table-i18n-edit-id").tableEditData({
                    width : _gridWidth,
                    height:400,
                    url:/*[[@{/menu/getI18nByMenuId}]]*/"",
                    colModel : [
                        {display : 'menuId',name : 'menuId',width : 150,align : 'center',hide : 'true'},
                        {display : /*[[#{menu.lang}]]*/"",name : 'langId',width : _columnWidth,dom: function(obj,v,_trid,_row){
                                var select = $("#lang-template-id").clone();
                                select.removeClass("fade");
                                select.val(v);
                                select.css("width","43%");
                                select.appendTo(obj);
                                select.attr("readonly",true);
                                if(_row){
                                    select.attr("disabled","disabled");
                                }else {
                                    select.removeAttr("disabled");
                                }

                                var span = $("<span></span>");
                                span.addClass("read");
                                var vl  =  select.find("option[value='" + v + "']").text();
                                span.text(vl);
                                span.appendTo(obj);


                            }},
                        {display : /*[[#{menu.name}]]*/"",name : 'menuName',width : _columnWidth},
                        {display : /*[[#{common.operation}]]*/"",name : 'menuName',width : _columnWidth,process: function(v,_trid,_row) {
                                var html='<a href="#" class="read" onclick="editTable(\''+ _trid +'\');"> <i class="fa fa-pencil"></i> </a>';
                                html +='<a href="#" class="edit" onclick="saveTable(\''+ _trid +'\');"> <i class="fa fa-floppy-o"></i> </a>';
                                html +='<a href="#" class="read" onclick="deleteTable(\''+ _trid +'\');"> <i class="fa fa-trash-o"></i> </a>';

                                return html;
                            }}
                    ]
                });

                leftMenuLoad();

                $("#modify-menu-info-form-id").ajaxForm({
                    dataType: "json",
                    success : function(data) {
                        message(data.msg);
                        leftMenuLoad();
                    },
                    error : function() {
                        message(/*[[#{common.error}]]*/'');
                    },
                    complete : function(response, status) {

                    }
                });
                $("#add-menu-info-form-id").ajaxForm({
                    dataType: "json",
                    success: function (data) {
                        message(data.msg);
                        leftMenuLoad();
                        $("#add-menu-info-dialog-id").dialog('close');
                    },
                    error: function () {
                        message(/*[[#{common.error}]]*/'');
                    },
                    complete: function (response, status) {

                    }

                });
                $("#add-menu-info-dialog-id").dialog({
                    autoOpen : false,
                    width : 400,
                    modal : true,
                    resizable : false,
                    title: /*[[#{menu.add}]]*/'',
                    buttons: [
                        {
                            text: /*[[#{common.confirm}]]*/'',
                            click: function() {
                                var flag = true;
                                var dom = $("#add-menu-info-form-id > div > .form-control");
                                dom.each(function(index,item) {
                                    flag &= $(item).verification();
                                    console.info(flag);
                                });
                                if(!flag){
                                    return;
                                }
                                $("#add-menu-info-form-id").submit();
                            }
                        },
                        {
                            text: /*[[#{common.cancel}]]*/'',
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });
                $("#bound-menu-dialog-id").dialog({
                    autoOpen : false,
                    width : 400,
                    height:400,
                    modal : true,
                    resizable : false,
                    title: /*[[#{common.bound}]]*/'',
                    buttons: [
                        {
                            text: /*[[#{common.confirm}]]*/'"></spring:message>',
                            click: function() {
                                var parentId = "";
                                var ztreeObj = $.fn.zTree.getZTreeObj("bound-menu-ztree-id");
                                var nodes = ztreeObj.getCheckedNodes(true);
                                $(nodes).each(function (index,item) {
                                    parentId =item.id;
                                });
                                var menuId = $("#mod-menu-id").val();

                                $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{/menu/boundMenu }]]*/'',
                                    data: [
                                        {name:"parentId",value:parentId},
                                        {name:"menuId",value:menuId}
                                    ],
                                    success: function (data) {
                                        message(data.msg);
                                        $("#bound-menu-dialog-id").dialog('close');
                                        leftMenuLoad();
                                    },
                                    error: function(msg){
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                });
                            }
                        },
                        {
                            text: /*[[#{common.cancel}]]*/'',
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });
                $("ul#tab-ul-menu-id > li").click(function(event) {
                    $("ul#tab-ul-menu-id .active").removeClass("active");
                    $(this).addClass("active");

                    $("section.tab-content .in").removeClass("in");
                    $("section.tab-content .active").removeClass("active");
                    var tab = $(this).attr("tab");
                    $("#" + tab).addClass("in");
                    $("#" + tab).addClass("active")
                });
                $("ul#tab-ul-menu-id > li:first").click();

            });

            //ztree回调事件
            function onClickNode(event, treeId, treeNode){
                //console.info(treeNode.id);
                $.ajax({
                        type: 'post',
                        async: false,
                        dataType : 'json',
                        url: /*[[@{/menu/getMenuInfoById}]]*/'',
                        data: [{name:"menuId",value:treeNode.id}],
                        success: function (data) {
                            var dom = $("#modify-menu-info-form-id .form-control");
                            dom.each(function(index,item) {
                                var nameAttr = $(item).attr("name");
                                // console.info(data[nameAttr]);
                                $(item).val(data[nameAttr]);
                            });

                        },
                        error: function(msg){
                            message(/*[[#{common.error}]]*/'');
                        }
                    }
                );
                $("#table-i18n-edit-id").tableEditOptions({
                    extParam:[
                        {name:"menuId",value:treeNode.id}
                    ]
                }).tableEditReload();

            }


            function modifyMenuInfo() {
                var flag = true;
                var dom = $("#modify-menu-info-form-id > div > .form-control");
                dom.each(function(index,item) {
                    flag &= $(item).verification();
                    console.info(flag);
                });
                if(!flag){
                    return;
                }
                $("#modify-menu-info-form-id").submit();

            }

            function addMenuInfo() {
                $("#add-menu-info-form-id").resetForm();
                $("#add-menu-info-dialog-id").dialog('open');
            }


            function deleteMenuInfo() {
                    var modMenuId = $("#mod-menu-id").val();
                    if (modMenuId == null || "" === modMenuId) {
                        return;
                    }
                    $.ajax({
                        type: 'post',
                        async: false,
                        dataType: 'json',
                        url: /*[[@{/menu/deleteMenuInfoById}]]*/'',
                        data: [{name: "menuId", value: modMenuId}],
                        success: function (data) {
                            message(data.msg);
                            $("#modify-menu-info-form-id").resetForm();
                            leftMenuLoad();
                        },
                        error: function (msg) {
                            message(/*[[#{common.error}]]*/'');
                        }
                    });




            }

        </script>
    <div style="flex-basis: 94px;display: flex;flex-direction: row">
        <div style="width:400px">
            <nav>
                <span th:text="#{menu.info.tip}"></span>
                <ul id="menu-left-tree-ul-id" class="ztree" ></ul>
            </nav>
        </div>
        <article style="flex-grow: 2">
            <form id="modify-menu-info-form-id" th:action="@{/menu/modifyMenuInfoById}"
                  method="post">
                <fieldset >
                    <legend>
                        <span th:text="#{common.base}"></span>
                    </legend>
                    <div class="form-tow-column">
                        <div class="form-group">
                            <span for="mod-menu-id" th:text="#{menu.id}"> </span>
                            <input name="menuId" id="mod-menu-id" class="form-control" readonly >
                        </div>
                        <div class="form-group">
                            <span for="mod-menu-name-id" th:text="#{menu.name}"></span>
                            <input name="menuName" id="mod-menu-name-id" class="form-control" regex="^.{1,50}$" tip="input 1 to 50 char">
                        </div>
                        <div class="form-group">
                            <span for="mod-menu-type-id" th:text="#{menu.type}"> </span>
                            <select gdmt:dicselect="menu.type" class="form-control" id="mod-menu-type-id" name="menuType" regex="^\d$" tip="please choose"></select>
                        </div>
                        <div class="form-group">
                            <span for="mod-menu-type-id" th:text="#{menu.level}"></span>
                            <select gdmt:dicselect="menu.level" class="form-control" id="mod-menu-level-id" name="menuLevel"></select>
                        </div>
                        <div class="form-group">
                            <span for="mod-menu-url-id">URL</span>
                            <input name="menuUrl" id="mod-menu-url-id" class="form-control">
                        </div>
                        <div class="form-group">
                            <span for="mod-menu-privilege-code-id" th:text="#{menu.privilege.code}"> </span>
                            <input name="privilegeCode" id="mod-menu-privilege-code-id" class="form-control">
                        </div>
                        <div class="form-group">
                            <span for="mod-menu-icon-id" th:text="#{menu.menu.icon}"></span>
                            <input name="menuIcon" id="mod-menu-icon-id" class="form-control">
                        </div>
                        <div class="form-group">
                            <span for="mod-menu-http-id" th:text="#{menu.menu.http}"> </span>
                            <select gdmt:dicselect="menu.https" class="form-control" id="mod-menu-http-id" name="isHttps" value="0"></select>
                        </div>
                    </div>
                </fieldset>
            </form>
        </article>








    </div>
    <div>
        <ul id="tab-ul-menu-id" class="nav nav-tabs"  >
            <li tab="tab-i18n-id">
                <a href="#">
                    <i class="fa fa-university"></i>
                    <span th:text="#{common.i18n.name}"></span>

                </a>
            </li>
            <li tab="tab-son-menu-id">
                <a href="#">
                    <i class="fa fa-th"></i>
                    <span th:text="#{menu.son.name}"></span>

                </a>
            </li>
        </ul>
        <section class="tab-content">
            <article id="tab-i18n-id" class="tab-pane fade in active">
                <span th:text="#{common.i18n.name}"></span>
            </article>
            <article id="tab-son-menu-id" class="tab-pane fade">
                <span th:text="#{menu.son.name}"></span>

            </article>
        </section>
        <table id="table-i18n-edit-id" class="table-edit-data"></table>
        <select  id="lang-template-id" class="edit fade" name="langId"  gdmt:dicselect="lang.type"></select>

    </div>




        <div id="add-menu-info-dialog-id" style="display: none">
            <form id="add-menu-info-form-id" th:action="@{/menu/addMenuInfoById}"
                  method="post">
                <div class="form-group">
                    <span for="add-menu-name-id" th:text="#{menu.name}"></span>
                    <input name="menuName" id="add-menu-name-id" class="form-control" regex="^.{1,50}$" tip="input 1 to 50 char">
                </div>
                <div class="form-group">
                    <span for="add-menu-type-id" th:text="#{menu.type}"> </span>
                    <select gdmt:dicselect="menu.type" class="form-control" id="add-menu-type-id" name="menuType" regex="^\d$" tip="please choose"></select>
                </div>
                <div class="form-group">
                    <span for="add-menu-type-id" th:text="#{menu.level}"> </span>
                    <select gdmt:dicselect="menu.level" class="form-control" id="add-menu-level-id" name="menuLevel" regex="^\d$" tip="please choose"></select>
                </div>
                <div class="form-group">
                    <span for="add-menu-url-id">URL</span>
                    <input name="menuUrl" id="add-menu-url-id" class="form-control" regex="^([a-z,A-Z]([a-z,A-Z,0-9]|_)*(/[a-z,A-Z]([a-z,A-Z,0-9]|_)*)*)?$" tip="please input url">
                </div>
                <div class="form-group">
                    <span for="add-menu-privilege-code-id" th:text="#{menu.privilege.code}"> </span>
                    <input name="privilegeCode" id="add-menu-privilege-code-id" class="form-control" regex="^\w*$" tip="please input char 、number、_ ">
                </div>
                <div class="form-group">
                    <span for="add-menu-icon-id" th:text="#{menu.menu.icon}"></span>
                    <input name="menuIcon" id="add-menu-icon-id" class="form-control" regex="^.+$" tip="please input icon class ">
                </div>
                <div class="form-group">
                    <span for="add-menu-http-id" th:text="#{menu.menu.http}"> </span>
                    <select gdmt:dicselect="menu.https" class="form-control" id="add-menu-http-id" name="isHttps" regex="^\d$" tip="please choose"></select>
                </div>
            </form>
        </div>
    <div id="bound-menu-dialog-id" style="display: none">
        <ul id="bound-menu-ztree-id" class="ztree"></ul>
    </div>









</html>